r
<template>
    <view class="productMain">
        <view v-if="productList.length === 0" style="display: flex;justify-content: center;align-items: center;height: 100vh;"><u-button size="mini" open-type="contact" shape="circle">暂无该系列，请联系我添加</u-button></view>
        <view v-else>
            <u-row gutter="16">
                <u-col span="6" v-for="item in productList" :key="item.id">
                    <view class="product-list" @click="toDetail(item.id)">
                        <u-image class="product-list-image" height="180rpx" width="320rpx" :src="item.product_logo[0]">
                            <u-loading slot="loading"></u-loading>
                            <view slot="error" style="font-size: 24rpx;">加载失败</view>
                        </u-image>
                        <view class="product-list-title u-line-1">{{ item.product_name }}</view>
                    </view>
                </u-col>
            </u-row>
        </view>
        <u-back-top :scroll-top="scrollTop"></u-back-top>
        <u-divider margin-top="20" bg-color="#f3f4f6" margin-bottom="20" v-show="isBottom">{{ loadText }}~</u-divider>
        <customTab :tab="tab"></customTab>
    </view>
</template>

<script>
import customTab from '../../component/customTab/customTab';
export default {
    components: { customTab },
    data() {
        return {
            loadText: '上拉加载更多',
            isGetMore: true,
            isBottom: false,
            where: {},
            scrollTop: 0,
            productList: [],
            limit: 10,
            page: 1,
            tab: {
                iconPath: '/static/tabbar/wine.png',
                selectedIconPath: '/static/tabbar/wine.png',
                text: '分类',
                pagePath: '/pages/product/product',
                customIcon: false
            }
        };
    },
    methods: {
        toDetail(item) {
            this.$u.route('/pages/productDetail/productDetail', {
                id: item
            });
        },
        async getProductList() {
            let res = await this.$u.api.getProductList({ ...this.where, page: this.page, limit: this.limit });
            this.productList = res.list;
        },
        async getMore() {
            if (!this.isGetMore) return;
            let res = await this.$u.api.getProductList({
                page: (this.page += 1),
                limit: this.limit,
                ...this.where
            });
            if (res.count === 0) {
                this.loadText = '实在没有了~';
                this.isGetMore = false;
                return;
            }
            this.productList = [...this.productList, ...res.list];
        }
    },
    mounted() {
        this.getProductList();
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    onReachBottom() {
        this.isBottom = true;
        this.getMore();
    },
    onLoad(options) {
        if (options.area) {
            this.where = {
                area: options.area
            };
        }
        if (options.keyword) {
            this.where = {
                keyword: options.keyword
            };
        }
        if (options.cate) {
            this.where = {
                cate: options.cate
            };
        }
    }
};
</script>

<style scoped lang="scss">
.productMain {
    background-color: #f3f4f6;
    padding-bottom: 20rpx;
    min-height: 100vh;
}

.product-list {
    background-color: #ffffff;
    padding: 10rpx;
    margin: 10rpx;
    /* .product-list-image {
        width: 319rpx;
        height: 180rpx;
    } */
    .product-list-title {
        color: #303133;
        font-size: 26rpx;
        font-weight: 200rpx;
        padding: 5rpx;
        margin: 10rpx;
    }
}
</style>
